<template>
  <div class="user-order" :style="outModuleCss">
    <div :style="moduleBgCss" class="module-bg"></div>
    <section class="order-box">
      <div class="content-header" v-show="showHeader">
        <moduleHeader
          :propsData="propsData"
          :moduleName="propsData.params.moduleName"
          moreText="全部订单"
          @editModuleHeader="editModuleHeader"
        ></moduleHeader>
      </div>
      <div class="split-line" v-show="showHeader"></div>
      <div class="content-body">
        <section class="tabs-list">
          <div class="tab-item" v-for="(item, index) in tabsList" :key="index">
            <img class="tab-img" :src="item.tabImg || defaultImg" alt="" />
            <p :style="{ color: fontColor }">{{ item.tabText }}</p>
            <div class="item-hover">
              <div
                class="edit-box"
                @click.stop="handleTabItem('userOrderTabItemControl', item)"
              >
                <i class="iconfont icon-mokuai-bianji"></i>
              </div>
            </div>
          </div>
        </section>
      </div>
    </section>
  </div>
</template>

<script>
import { mixinsModuleCss } from "@/components/DiyNew/diy/mixins/index.js";
import moduleHeader from "@/components/DiyNew/diy/baseControl/moduleHeader/index.vue";
import defaultImg from "@/assets/images/diy/default_img.png";

export default {
  name: "userOrder",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [mixinsModuleCss],
  components: {
    moduleHeader,
  },
  data() {
    return {
      defaultImg,
    };
  },
  mounted() {},
  watch: {},
  computed: {
    styleType() {
      return this.propsData.params.styleType || "1";
    },
    fontColor() {
      return this.propsData.params.fontColor;
    },
    showHeader() {
      return this.propsData.params.showText;
    },
    tabsList() {
      return this.propsData.params.tabsList;
    },
  },
  methods: {
    // 点击编辑
    handleItemToControl(name) {
      let data = Object.assign({}, this.propsData);
      data.controlComName = name;
      this.$emit("chooseMoudle", data);
    },
    editModuleHeader(e) {
      this.$emit("chooseMoudle", e);
    },
    handleTabItem(name, item) {
      let data = item;
      data.controlComName = name;
      this.$emit("chooseMoudle", data);
    },
  },
};
</script>

<style lang="scss" scoped>
.user-order {
  width: 100%;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
  .order-box {
    width: 100%;

    .content-header {
      width: 100%;
      padding: 10px 12px;
      position: relative;
    }
    .split-line {
      width: 93.3%;
      height: 1px;
      background-color: #f1f1f1;
      margin: 0 auto;
    }
    .content-body {
      width: 100%;
      padding: 11px 12px;
      .tabs-list {
        display: flex;
        align-items: center;
        .tab-item {
          width: 20%;
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          position: relative;
          .tab-img {
            width: 25px;
          }
          p {
            margin-bottom: 0;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #414141;
            margin-top: 6px;
          }
          .item-hover {
            width: 100%;
            height: 100%;
            border: 1px solid #1890fc;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            .edit-box {
              width: 20px;
              height: 20px;
              background: #1890fc;
              border-radius: 0px 0px 0px 4px;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;
              position: absolute;
              right: 0;
              top: 0;
              .iconfont {
                font-size: 18px;
                color: #ffffff;
              }
            }
          }
        }
        .tab-item:hover > .item-hover {
          display: block;
        }
      }
    }
  }
}
</style>
